<template>
  <div class="home">

    <Show
        :total="total"
        :add="add"
        :recovered="recovered"
        :death="death">
    </Show>
    <Echarts class="chart"></Echarts>
    <Table :tableData="tableData"></Table>

  </div>
</template>

<script>
// @ is an alias to /src
import Show from '@/components/Show.vue'
import Table from "@/components/Table";
import Echarts from "@/components/Echarts";

export default {
  name: 'Home',
  components: {
    Show,Table,Echarts
  },
  data(){
    return{
      total: -1,
      add: -1,
      recovered: -1,
      death: -1,
      tableData: []
    }
  },
  mounted() {
    this.getCount();
    this.getTotalData();
  },
  methods: {
    getCount(){
      this.$axios.post("/all").then(res=>{
        this.total = res.data.data.sum;
        this.add = res.data.data.add;
        this.death = res.data.data.death;
        this.recovered = res.data.data.recovered;
      })
    },
    getTotalData() {
      this.$axios.get("/all").then(res => {
        // console.log(res);
        var lists = res.data.data.map(item => {
          return {
            state: item.state,
            country: item.country,
            total: item.latestTotalCases,
            add: item.diffFromPrevDay
          }
        });
        // console.log(lists);
        this.tableData = lists;
      })
    }
  }
}
</script>
<style>
.chart{
  margin-left: 30%;
}
</style>
